<template>
    <div class="saying">
        <h2>我是Saying组件</h2>
        <h4>学校的校龄：{{School.age}}</h4>
        <ul>
            <li v-for="saying in SayingList" :key='saying.id'>{{saying.title}}</li>
        </ul>
        <button @click="addSaying">添加一个语录</button>
    </div>
</template>

<script>
    import {
        mapState,
        mapActions
    } from 'vuex'

    export default {
        name: 'Saying',
        methods: {
            ...mapActions(['addSaying'])
        },
        computed: {
            ...mapState(['School', 'SayingList'])
        }
    }
</script>

<style scoped>
    .saying {
        background-color: orange;
        padding: 20px;
    }
</style>